<template>
  <div class="infor">
    <div class="person">
      <div class="title">请进行指纹识别</div>
      <van-cell-group>
        <van-field
          v-model="face.realName"
          label="姓名"
          placeholder="正在读取数据。。。请稍等"
          readonly
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="face.unitGroup"
          label="单位"
          placeholder="正在读取数据。。。请稍等"
          readonly
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="face.userGroup"
          label="课题组"
          placeholder="正在读取数据。。。请稍等"
          readonly
        />
      </van-cell-group>
      <div class="data">
        <van-field
          v-model="value"
          is-link
          readonly
          name="picker"
          label="事由选择"
          placeholder="点击选择事由"
          @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </div>
    </div>
    <div class="button">
      <van-button type="primary" @click="indoor" :disabled="!show">
        确认进入
      </van-button>
      <van-button type="primary" @click="out" :disabled="!show"
        >退出</van-button
      >
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, watchEffect } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { postUserin, getThingList } from "@/api/sign.js";
import { useMessage } from "naive-ui";
function speckText(str) {
  var url =
    "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=6&text=" +
    encodeURI(str);
  new Audio(url).play();
  //var n = new Audio(url);
  //n.src = url;
  //n.play();
}
export default {
  props: {
    send: Object,
  },
  setup(props) {
    console.log(
      "%c 🍞 props: ",
      "font-size:20px;background-color: #42b983;color:#fff;",
      props
    );
    // const state = reactive({});
    const message = useMessage();
    const router = useRouter();
    const store = useStore();
    const state = reactive({
      show: false,
      value: "",
      showPicker: false,
      face: {
        unitGroup: "",
        userGroup: "",
        realName: "",
      },
      param: {
        faceId: "",
        to_do: "",
      },
      columnsdata: "",
    });
    //获取colmuns的列表
    const columns = [];
    const getcolums = async () => {
      try {
        const { data } = await getThingList();

        data.forEach((item) => {
          columns.push(item.name);
        });
        state.columnsdata = data;
      } catch {
        message.error("获取人脸信息错误！！！", {
          duration: 5000,
          closable: true,
        });
      }
    };
    getcolums();
    //处理选中的列表
    const onConfirm = (value) => {
      state.value = value;
      state.columnsdata.forEach((item) => {
        if (item.name == value) {
          state.param.to_do = item.id;
        }
      });
      state.showPicker = false;
    };
    const out = () => {
      router.push("/");
    };
    const indoor = async () => {
      try {
        if (state.param.to_do.length == 0) {
          Toast.fail("请填写事由！");
          return;
        }
        Toast.loading({
          message: "打卡中...",
          forbidClick: true,
        });
        const res = await postUserin(state.param);

        if (res.status != 200) {
          Toast.fail(res.msg);
          return;
        }
        speckText("恭喜你！登记成功");
        Toast.success("恭喜你！登记成功");
        store.dispatch("cleardata");

        setTimeout(function () {
          router.push("/");
        }, 1000);
      } catch {
        message.error("签到程序错误！！！！", {
          duration: 5000,
          closable: true,
        });
      }
    };
    watchEffect(() => {
      state.face.unitGroup = props.send.unitGroup;
      state.face.userGroup = props.send.userGroup;
      state.face.realName = props.send.realName;
      state.param.faceId = props.send.faceId;
      if (props.send.faceId != "") {
        state.show = true;
      }
    });
    return {
      indoor,
      out,
      ...toRefs(state),
      columns,
      onConfirm,
    };
  },
};
</script>

<style lang="scss" scoped>
.infor {
  height: 400px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: 20px;
  width: 400px;
  .person {
    width: calc(100% - 10px);
    height: 280px;
    background-color: #fff;
    box-shadow: 3px 3px 9px 4px rgba(155, 0, 0, 100);
    font-family: Arial;
    border: 1px solid rgba(187, 187, 187, 100);
    border-radius: 20px 20px 20px 20px;
    .title {
      color: rgb(154, 0, 0);
      font-size: 25px;
      text-align: center;
      line-height: 80px;
    }
  }
  .button {
    margin-top: 35px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
